<template>
  <div>
    <HomeHeader></HomeHeader>
    <TypeNav></TypeNav>
    <el-form>
      <div class="detail-box">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">盛世绿能招投标系统</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/tenderList' }">招标信息</el-breadcrumb-item>
          <el-breadcrumb-item >招标详情</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="detail1-grid-content">
          <h1 style="text-align: center;padding-top: 20px;">招标详情</h1>
          <el-descriptions  class="margin-top" title="招标项目" :column="2" :size="size" border >
            <el-descriptions-item >
              <template slot="label" >
                招标项目编号
              </template>
              {{queryParams.sCode}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                招标项目名称
              </template>
              <template>
                <span  v-if="routeType ==='details' || routeType ==='bidding'"> {{queryParams.sName}}</span>
                <el-input id="input-common"  v-model:value="queryParams.sName"  v-if="routeType ==='update'"/>
              </template>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                招标方式
              </template>
              <template slot="default">
                <el-radio v-model="queryParams.sWay" value="1" label="1" :disabled="true">公开招标</el-radio>
                <el-radio v-model="queryParams.sWay" value="2" label="2" :disabled="true">邀请招标</el-radio>
              </template>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                是否招标
              </template>
              <template slot="default">
                <el-radio v-model="queryParams.sMust" label="1" :disabled="true">依法必招</el-radio>
                <el-radio v-model="queryParams.sMust" label="2" :disabled="true">自主招标</el-radio>
              </template>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                资格审查方式
              </template>
              <template slot="default">
                <el-radio v-model="queryParams.sSway" label="1" :disabled="true">资格预审</el-radio>
                <el-radio v-model="queryParams.sSway" label="2" :disabled="true">资格后审</el-radio>
              </template>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                业务类型
              </template>
              <template>
                <span v-if="queryParams.sType === '1'">办公类型</span>
                <span v-else-if="queryParams.sType === '2'">固定资产</span>
                <span v-else-if="queryParams.sType === '3'">资讯类</span>
                <span v-else-if="queryParams.sType === '4'">服务类</span>
              </template>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                项目预算（元）
              </template>
              <template>
                ——
              </template>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                项目负责人
              </template>
              <template>
                <span  v-if="routeType ==='details' || routeType ==='bidding'"> {{queryParams.sLeader}}</span>
                <el-input id="input-common8"  v-model:value="queryParams.sLeader"  v-if="routeType ==='update'"/>
              </template>
            </el-descriptions-item>
            <el-descriptions-item label="招标人信息"/>
            <el-descriptions-item/>
            <el-descriptions-item>
              <template slot="label">
                招标单位
              </template>
              <template>
                <span  v-if="routeType ==='details' || routeType ==='bidding'"> {{queryParams.sUnit}}</span>
                <el-input id="input-common2"  v-model:value="queryParams.sUnit"  v-if="routeType ==='update'"/>
              </template>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                联系人
              </template>
              <template>
                <span  v-if="routeType ==='details'  || routeType ==='bidding'"> {{queryParams.sPerson}}</span>
                <el-input id="input-common3"  v-model:value="queryParams.sPerson"  v-if="routeType ==='update'"/>
              </template>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                电话
              </template>
              <template>
                <span  v-if="routeType ==='details' || routeType ==='bidding'"> {{queryParams.sPhone}}</span>
                <el-input id="input-common4"  v-model:value="queryParams.sPhone"  v-if="routeType ==='update'"/>
              </template>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                邮箱
              </template>
              <template>
                <span  v-if="routeType ==='details' || routeType ==='bidding'"> {{queryParams.email}}</span>
                <el-input id="input-common5"  v-model:value="queryParams.email"  v-if="routeType ==='update'"/>
              </template>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                地址
              </template>
              <template>
                <span  v-if="routeType ==='details' || routeType ==='bidding'"> {{queryParams.sAddress}}</span>
                <el-input id="input-common6"  v-model:value="queryParams.sAddress"  v-if="routeType ==='update'"/>
              </template>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label"/>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                相关文件
              </template>
              <template>
                <el-upload ref="upload" class="upload-demo" :limit="4" accept=".doc, .docx, .pdf, .xls, .xlsx, .rar, .txt, .png, .jpg"
                           multiple
                           :action="upload.url"
                           :on-change="changeFileLength"
                           :headers="upload.headers" :file-list="upload.fileList" :before-remove="beforeRemove"
                           :on-progress="handleFileUploadProgress"
                           :before-upload="beforeUpload"
                           :auto-upload="false">
                  <el-button slot="trigger" size="small" type="primary" :disabled="true">选取文件</el-button>
                </el-upload>
              </template>
            </el-descriptions-item>
            <el-descriptions-item/>
          </el-descriptions>

          <div class="box2">行项目信息</div>
          <el-table stripe :data="tableData3" v-loading="loading3" border style="width: 100%" max-height="300" :cell-style="{'text-align':'center'}">
            <el-table-column fixed label="序号" width="100" type="index" align="center"/>
            <el-table-column fixed label="部门名称" width="140" align="center">
              <template slot-scope="scope">
                {{scope.row.ppmBudget.duName || '——'}}
              </template>
            </el-table-column>
            <el-table-column fixed label="预算科目编号" width="140" align="center">
              <template slot-scope="scope">
                {{scope.row.ppmBudget.duId || '——'}}
              </template>
            </el-table-column>
            <el-table-column fixed  label="预算科目名称" width="140" align="center">
              <template slot-scope="scope">
                {{scope.row.ppmBudget.duName || '——'}}
              </template>
            </el-table-column>
            <el-table-column fixed label="总金额" width="140" align="center">
              <template slot-scope="scope">
                {{scope.row.ppmBudget.duTotal || '——'}}
              </template>
            </el-table-column>
            <el-table-column label="行项目编号" width="200" align="center">
              <template slot-scope="scope">
                {{scope.row.vCode || '——'}}
              </template>
            </el-table-column>
            <el-table-column label="数量" width="120" align="center">
              <template slot-scope="scope">
                {{scope.row.vCount || '——'}}
              </template>
            </el-table-column>
            <el-table-column label="采购人" width="120" align="center">
              <template slot-scope="scope">
                {{scope.row.vPerson  || '——'}}
              </template>

            </el-table-column>
            <el-table-column label="交付时间" width="200" align="center">
              <template slot-scope="scope">
                {{parseTime(scope.row.vDeliveryTime, '{y}-{m}-{d} {h}:{i}:{s}')}}
              </template>
            </el-table-column>
            <el-table-column label="交付地点" width="200" align="center">
              <template slot-scope="scope">
                {{scope.row.vDeliveryArea || '——'}}
              </template>
            </el-table-column>
            <el-table-column label="采购方式" width="120" align="center">
              <template slot-scope="scope">
                {{scope.row.procurementMethod || '——'}}
              </template>
            </el-table-column>
            <el-table-column  label="产品名称" width="120" align="center">
              <template slot-scope="scope">
                {{scope.row.ppmDevice.tName || '——'}}
              </template>
            </el-table-column>
            <el-table-column label="计量单位" width="100" align="center">
              <template slot-scope="scope">
                {{scope.row.ppmDevice.tUnit || '——'}}
              </template>
            </el-table-column>
            <el-table-column label="税率" width="100" align="center">
              <template slot-scope="scope">
                {{scope.row.ppmDevice.shui || '——'}}
              </template>
            </el-table-column>
            <el-table-column label="类别" width="120" align="center">
              <template slot-scope="scope">
                {{scope.row.ppmDevice.category || '——'}}
              </template>
            </el-table-column>
            <el-table-column label="需求说明" width="200" align="center">
              <template slot-scope="scope">
                {{scope.row.ppmDevice.tIllustrate || '——'}}
              </template>
            </el-table-column>
            <el-table-column label="规格型号" width="200" align="center">
              <template slot-scope="scope">
                {{scope.row.ppmDevice.tModel || '——'}}
              </template>
            </el-table-column>
          </el-table>

        </div>
      </div>
    </el-form>
    <HomeFloor></HomeFloor>
  </div>
</template>
<script>
import HomeFloor from "@/components/home/HomeFloor.vue";
import HomeHeader from "@/components/home/HomeHeader";
import TypeNav from "@/components/home/TypeNav";
import Pagination from "@/components/Pagination/index.vue";
import {getTender} from '@/api/system/tender'
import {selectProcurementPlanByIdForThreeTables} from "@/api/system/procurement";
import {getToken} from "@/utils/auth";


export default {
  name: 'tenderDetails',
  components:{
    HomeHeader,
    TypeNav,
    HomeFloor,
    Pagination
  },
  data() {
    return {
      size:"0",
      routeType:"",
      queryParams:{
        sid:0,
        sCode:"",
        sName:"",
        sWay: "0",
        sMust:"0",
        sSway: "0",
        sType: "0",
        sBudget:"",
        sUnit:"",
        sPerson:"",
        sPhone:"",
        email:"",
        sAddress:"",
        fjFiles:null,
        sProjectState:null,
        sLeader:null,
      },
      queryParams2:{
        sid:null,
        wTitle:null,
        wSize:null,
        fileName:null,
        url:null,
      },
      // 收集——上传文件的列表
      uploadFiles: [],
      // 收集——上传文件的个数
      filesLength: 0,
      urls:[],
      fjList:[],
      //未上传前文件列表
      noFiles:[],
      //未上传清除后文件列表
      noFiles2:[],
      // 上传参数
      upload: {
        // 上传的文件列表(专家签到表)
        fileList: [],
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: {
          Authorization: "Bearer " + getToken()
        },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/bidding/documents/upload1",
        mm:''
      },

      loading3:false,
      // 查询参数
      queryParams3: {
        pageNum: 1,
        pageSize: 10,
        tid:"",
        aid:"",
        tSid:"",
        jhId:"",
        tName:null,
        tDa:null,
        tZhong:null,
        tXiao:null,
        tAmount:null,
        tUnit:null,
        shui:null,
        tPrice:null,
        tTotalPrice:null,
        tDate:null,
        tAddress:null,
        tIllustrate:null,
        tPurchaser:null,
        duCode:null,
        tNotes:null,
        aWay:null,
        aState:null,
        orderNum:0
      },
      tableData3: []
    }

  },
  created() {
    this.routeType = this.$route.query.type;
    this.queryParams.sid =this.$route.query.sid;
    this.getList(this.queryParams.sid);

    this.loading3 = true;
    setTimeout(()=>{
      this.loading3 = false;
    },1500)
  },
  methods: {
    getList(sid) {
      this.loading = false;
      getTender(sid).then(response=>{
        if(response.data && response.data.data){
          this.queryParams.sCode=response.data.data.sCode;
          this.queryParams.sName=response.data.data.sName;
        }
        if(response.data.data.sWay != null){
          this.queryParams.sWay=response.data.data.sWay.toString();
        }
        if(response.data.data.sMust != null){
          this.queryParams.sMust=response.data.data.sMust.toString();
        }
        if(response.data.data.sType != null){
          this.queryParams.sType=response.data.data.sType.toString();
        }
        if(response.data.data.sSway != null){
          this.queryParams.sSway=response.data.data.sSway.toString();
        }
        //this.queryParams.sBudget=response.data.data.sBudget;
        this.queryParams.sLeader=response.data.data.sLeader;
        this.queryParams.sUnit=response.data.data.sUnit;
        this.queryParams.sPerson=response.data.data.sPerson;
        this.queryParams.sPhone=response.data.data.sPhone;
        this.queryParams.email=response.data.data.email;
        this.queryParams.sAddress=response.data.data.sAddress;
        this.queryParams.fjFiles = response.data.data.fjFiles;
        if(this.queryParams.fjFiles){
          this.upload.fileList= JSON.parse(this.queryParams.fjFiles);
        }

        selectProcurementPlanByIdForThreeTables(response.data.data.xyId).then(res => {
          //console.log(response,"res");
          this.tableData3 = res.data.data.items;
        });

      });
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 修改当前文件列表长度
    changeFileLength(file, fileList){
      this.noFiles.push(file);
      console.log( this.noFiles,"noFiles");
      this.filesLength = fileList.length;
      // console.log(this.noFiles,"nofiles");
    },
    beforeRemove(file, fileList) {
      this.noFiles2 =  this.noFiles.filter(f=>f.name !== file.name);
      console.log( this.noFiles2,"noFiles2");
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    beforeUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 100;
      if (!isLt5M) {
        this.$message.error('文件大小不能超过100MB');
      }
      return isLt5M;
    },
    parseTime(time, pattern) {
      if (arguments.length === 0 || !time) {
        return null
      }
      const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
      let date
      if (typeof time === 'object') {
        date = time
      } else {
        if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
          time = parseInt(time)
        } else if (typeof time === 'string') {
          time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
        }
        if ((typeof time === 'number') && (time.toString().length === 10)) {
          time = time * 1000
        }
        date = new Date(time)
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
      }
      const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key]
        // Note: getDay() returns 0 on Sunday
        if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
        if (result.length > 0 && value < 10) {
          value = '0' + value
        }
        return value || 0
      })
      return time_str
    },
  }
}

</script>
<style>
.detail-box {
  width: 1400px;
  min-height: 800px;
  margin: 10px auto;
}

.box2 {
  margin: 10px 0 15px 0px;
  color: #0065B5;
  font-size: 16px;
  font-weight: bold;
  border-left: solid 5px;border-color: #0065b5 !important;padding-left: 7px;
}

.el-descriptions__title {
  font-size: 16px;
  font-weight: 700;
  border-left: solid 5px;border-color: #0065b5 !important;padding-left: 7px;
}

.el-tag {
  background-color: #ecf5ff;
  border-color: #d9ecff;
  height: 34px;
  padding: 0 0px;
  line-height: 30px;
  font-size: 12px;
  color: #0065B5;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  box-sizing: border-box;
  white-space: nowrap;
}

.detail1-grid-content {
  margin-top: 21px;
  width: 1400px;
  min-height: 860px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  padding-left: 20px;
  padding-right: 20px;
}

p {
  margin: 10px 0;
}

.demo-table-expand label {
  width: 120px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 80%;
}

</style>
